<script setup lang="ts" name="NewsPage">
import { reactive } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const newsList = reactive<News[]>([
  { id: "n-1", title: "新闻-1", content: "内容1" },
  { id: "n-2", title: "新闻-2", content: "内容2" },
  { id: "n-3", title: "新闻-3", content: "内容3" },
  { id: "n-4", title: "新闻-4", content: "内容4" },
  { id: "n-5", title: "新闻-5", content: "内容5" },
]);

const showDetail = (params: News) => {
  router.push({ name: "NewsDetail", params });
};
</script>

<template>
  <h2 class="text-2xl">News</h2>
  <div class="flex justify-start items-start gap-x-2">
    <ul class="w-1/5 flex flex-col gap-y-2">
      <li v-for="n in newsList" :key="n.id">
        <button
          class="border px-1 py-0.5 mr-1 text-xs"
          @click="showDetail({ ...n })"
        >
          详情
        </button>
        <RouterLink replace :to="{ name: 'NewsDetail', params: { ...n } }"
          >{{ n.title }}
        </RouterLink>
      </li>
    </ul>
    <div class="border rounded w-4/5 p-6">
      <RouterView />
    </div>
  </div>
</template>
